
<style lang="stylus" scoped>
    .container 
        width: 100%;
        height: 100%;
        position relative;
        
        .text-overflow-1 {
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap
        }

        .pro {
            width 100%;
            height auto;
            overflow hidden;
            margin-top: 50px;
            ul {
                width 100%;
                box-sizing border-box; 
                flex-wrap: wrap;
                margin-top:10px;
                li {
                    width 50%; 
                    box-sizing border-box;
                    padding 5px 10px;
                    min-height 100px;
                    position relative
                    .item {
                        background #fff;
                        width 100%;
                        height 100%;
                        border-radius 5px;
                        padding 5px;
                        box-sizing border-box;
                        
                        
                        img {
                            width 100%;
                            height auto;
                            margin 0 auto;
                            visibility: visible;
                        }
                        .item-cart {
                            width 100%;
                            height 30px;
                            line-height 30px;
                            font-size: 12px;
                            span {
                                display block;
                            }
                            font {
                                color #FF0036;
                            }
                        }
                   
                        
                        
                    }
                }
            }
        }

        .in-btn {
            width 100%;
            padding 10px 10px;
            position fixed;
            left 0;
            right 0;
            bottom:0px;
            box-sizing border-box
            border-top 1px solid #e5e5e5;
            background #fff;
            button {
                text-align center;
                color #25b5fe;
                outline none;
                border 1px solid #25b5fe;
                margin 0 5px;
                height 30px;
                background #fff;
                border-radius: 5px;
            }
        }

        .layer {
            width: 100%;
            height: 100%;
            transform: translateY(100%);
            position: fixed;
            right: 0;
            bottom: 0;
            z-index: 5;
            .layer-bg {
                background-color: rgba(0,0,0,.5);
                height 50%;
            }
            .layer-info {
                height 50%;
                background #fff;
                padding 20px;
                box-sizing border-box;
                position relative;
                .layer-info__pro {
                    padding-bottom 20px;
                    border-bottom 1px solid #e5e5e5;
                    img {
                        width 100px;
                        height 100px;
                        display block;
                        margin-right 10px;
                    }
                    span {
                        font-family: arial;
                        font-size: 16px;
                        color: #FF0036;
                        display block;
                        word-wrap: break-word;
                    }
                    .text-gray {
                        color #555
                    }
                }

                .number-wrap {
                    width 100%;
                    height 45px;
                    line-height 45px;
                    border-bottom 1px solid #e5e5e5;
                    .number {
                        height 36px;
                        border-radius: 3px;
                        button {
                            outline: 0;
                            line-height: 32px;
                            height: 34px;
                            width: 30px;
                            font-size: 24px;
                            border: 1px solid #f5f5f5;
                            background-color: #f5f5f5;
                            text-align center;
                            &.decrease {
                                border-right: 1px solid #fff;
                            }
                            &.increase {
                                 border-left: 1px solid #fff;
                            }
                            &.disabled {
                                color: #cfcfcf;
                            }
                        }
                        input {
                            line-height: 32px;
                            height: 34px;
                            width: 45px;
                            text-align: center;
                            font-size: 13px;
                            font-weight: 700;
                            border: 1px solid #f5f5f5;
                            background-color: #f5f5f5;
                            box-sizing: border-box;
                            -webkit-appearance: none;
                            -moz-appearance: none;
                            -o-appearance: none;
                            appearance: none;
                            margin: 0;
                        }
                    }
                }
                .footer {
                    width 100%;
                    height 45px;
                    color: #fff;
                    background-color: #FF0036;
                    text-align center;
                    font-size: 18px;
                    position absolute;
                    left 0;
                    right 0;
                    bottom 0;
                    outline none;
                    border none;
                }
                .layer-close {
                    position absolute;
                    right 10px;
                    top: 10px;
                    width: 25px;
                    height 25px;
                    background: url(../../../static/img/close.png) center center no-repeat;
                    background-size: 100% 100%;
                }
            }
        }
</style>
<template>
    <div class="container flex-display flex-display-column">
         <ComHeader title="塞拉菲娜库存" leftArrow="true"/>
        <div class="pro">
            <ul class="flex-display">
                <li class="center" @click="fnOpenLayer(index)" v-for="(item,index) in goodslist" :key="index">
                    <div class="item flex-display flex-display-column ">
                        <img :src="item.photo"  style="height: 157.5px;"/>

                        <div class="item-cart flex-display">
                            <span class="flex-num-one text-overflow-1">{{item.title}}</span>
                        </div>
                        <div class="item-cart flex-display">
                            <span class="flex-num-one text-overflow-1">原价：<font>￥<s>{{item.old_price}}</s></font></span>
                            <span class="flex-num-one text-overflow-1">现价：<font>{{item.new_price}}</font></span>
                        </div>
                        <!-- 没有积分 -->
                        <div class="item-cart flex-display">
                            <span class="flex-num-one text-overflow-1">积分：<font>{{item.integral}}</font></span>
                            <span class="flex-num-one text-overflow-1">已售：<font>{{item.sales}}</font></span>
                        </div>
                    </div>
                </li>       
            </ul>
        </div> 
        <!--弹出框-->
        <div class="layer" v-bind:class="{animated:isOpenLayer,slideOutDown:isactive,slideInUp:!isactive}">
            <div class="layer-bg" @click="fnCloseLayer"></div>
            <div class="layer-info flex-display flex-display-column">
                <span class="layer-close" @click="fnCloseLayer"></span>
                <div class="layer-info__pro flex-display">
                    <img :src="this.currentGoods.photo?this.currentGoods.photo:''"/> 
                    <div class="flex-num-one flex-display flex-right-pack flex-display-column">
                        <span>￥:{{currentGoods.new_price?currentGoods.new_price:''}}</span>
                        <span class="text-gray">库存：{{currentGoods.inventory}}件</span>
                    </div>
                </div>
                <div class="number-wrap flex-display flex-center-align">
                    <span class="flex-num-one">数量：单位（{{currentGoods.units}}）</span>
                    <div class="number flex-display">    
                        <button class="decrease" :class="fn_cal_num" @click="fnHandleNum(false)">-</button>
                        <input type="number" v-model="num" />
                        <button class="increase" @click="fnHandleNum(true)">+</button>
                    </div>
                </div>
                <button class="footer" @click="fnBuy(currentGoods.goods_type)">确定购买</button>
            </div>
        </div>
    </div>
</template>
<script>
// 最小值
const MIN_NUM = 1;
import ComHeader from '@/common/ComHeader' 
import api from "@/fetch/api";
export default {
    data() {
        return {
        isactive: true,
        isOpenLayer:false,
        num: 1,
        // 当前商品
        currentGoods:{},
        // 商品列表
        goodslist:[]
        }
    },
    created() {

        // 获取个人信息
        this.ethelWxUserInfo = window.localStorage.getItem(this.companyUnique) ? JSON.parse(window.localStorage.getItem(this.companyUnique)) : '';

        // 获取库存列表【所有】
        const params3 = {
            userid:this.ethelWxUserInfo.id,
            type:'all'
        }
        api.getGoodsInfo(params3)
            .catch(res => {
                console.log('所有数据列表',res)
                this.goodslist = res.data

        })


    },
    methods: {
        // 进入每个商品选择数量
        fnOpenLayer(index) {
            console.log(index)
            console.log(this.goodslist[index])
            console.log(this.goodslist[index].photo)
            this.currentGoods = this.goodslist[index]
            console.log(this.currentGoods)
            this.isactive = false;
            this.isOpenLayer=true;
        },

        // 关闭弹框
        fnCloseLayer() {
            this.isactive=true;
        },

        // 改变数量
        fnHandleNum(isNum) {
            isNum ? this.num++ : (this.num > 1 ? this.num-- : 1)
        },

        // 从公司库存购买的函数
        fnBuy(type){
            console.log(type,this.num)
        },
    },
    computed: {
        fn_cal_num() {
            return this.num > MIN_NUM ? '' : 'disabled'
        }
    },
    components: {
      ComHeader
    },
}
</script>


